<!--
 * @Author: your name
 * @Date: 2021-08-17 11:14:20
 * @LastEditTime: 2021-08-28 16:45:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \orderSystems\src\components\gou\addDialog.vue
-->
<template>
  <!-- 菜品档案新增数据的弹窗 -->
  <div id="add-dialog">
    <el-dialog
      title="新增菜品"
      :visible.sync="changeStatus"
      :before-close="modalClose"
      center
      top="5vh"
    >
      <el-form :model="form">
        <el-row class="dish-img">
          <el-col :span="3">
            <span>菜品图片</span>
          </el-col>
          <el-col :span="20">
            <el-upload
              class="avatar-uploader"
              :action="axios.defaults.baseURL+'/upload/image'"
              name="image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="12">
            <el-form-item label="菜单编号" class="form-item-size">
              <el-input
                v-model="dishNo"
                placeholder="菜单编号"
                class="menu-number-input"
              ></el-input>
              <el-checkbox v-model="checked">自动生成编号</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜品名称">
              <el-input v-model="name" placeholder="菜品名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="12">
            <el-form-item label="菜品单位">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in dishUnitTable"
                  :key="item.id"
                  :label="item.unit"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜品单价">
              <el-input v-model="price" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="12">
            <el-form-item label="菜品特价" class="form-item-size">
              <el-input
                v-model="bargainPrice"
                placeholder="菜品特价"
                class="menu-number-inputName"
              ></el-input>
              <el-button
                type=""
                class="setting"
                @click="dialogFormVisible = true"
                >设置</el-button
              >
              <el-dialog
                title="特价"
                :visible.sync="dialogFormVisible"
                center
                width="30%"
                top="20vh"
                append-to-body
              >
                <el-row class="specil-price-row">
                  <el-col :span="4">原价:</el-col>
                  <el-col :span="20">
                    <el-input
                        v-model="originalPrice"
                        autocomplete="off"
                      ></el-input>
                    </el-col>
                </el-row>
                <el-form :model="form">
                  <el-row class="specil-price-row">
                    <el-col :span="4">特价:</el-col>
                    <el-col :span="20">
                      <el-input
                        v-model="bargainPrice"
                        autocomplete="off"
                      ></el-input>
                    </el-col>
                  </el-row>
                  <el-row class="specil-price-row">
                    <el-col :span="4">特价时间:</el-col>
                    <el-col :span="20">
                      <el-date-picker
                        v-model="bargainTime"
                        type="date"
                        placeholder="选择日期"
                        class="choice-date"
                        value-format="timestamp"
                      >
                      </el-date-picker>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="cancelAddSepcilPrice">取 消</el-button>
                  <el-button type="primary" @click="defineAddSpecilPrice"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存数量" class="form-item-size">
              <el-input
                v-model="stock"
                placeholder="库存预警"
                class="menu-number-inputName"
              ></el-input>
              <el-button class="setting" @click="dialogFormVisible1 = true"
                >设置</el-button
              >
              <el-dialog
                title="特价"
                :visible.sync="dialogFormVisible1"
                center
                width="30%"
                top="20vh"
                append-to-body
              >
                <el-row class="specil-price-row">
                  <el-col :span="8">库存预警线:</el-col>
                  <el-col :span="16">
                    <el-input v-model="stockWarn" autocomplete="off"></el-input>
                  </el-col>
                </el-row>
                <el-form :model="form">
                  <el-row class="specil-price-row">
                    <el-col :span="8">库存超出预警线:</el-col>
                    <el-col :span="16">
                      <el-input
                        v-model="stockOut"
                        autocomplete="off"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="cancelAddWarning">取 消</el-button>
                  <el-button type="primary" @click="defineAddWarning"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="12">
            <el-form-item label="菜品类别">
              <el-select v-model="value1" placeholder="请选择">
                <el-option
                  v-for="item in optionsCategory"
                  :key="item.id"
                  :label="item.category"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜品规格">
              <el-select v-model="value2" placeholder="请选择">
                <el-option
                  v-for="item in SpecificationTable"
                  :key="item.id"
                  :label="item.specification"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="12">
            <el-form-item label="菜品口味">
              <el-select v-model="value3" placeholder="请选择">
                <el-option
                  v-for="item in dishTasteTable"
                  :key="item.id"
                  :label="item.taste"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-switch
                v-model="status"
                active-color="#13ce66"
                inactive-color="#9E99B9"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="外卖点餐展示：">
              <el-switch
                v-model="isOut"
                active-color="#13ce66"
                inactive-color="#9E99B9"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门店点餐展示">
              <el-switch
                v-model="isShop"
                active-color="#13ce66"
                inactive-color="#9E99B9"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="备注:" :label-width="formLabelWidth">
              <el-input
                v-model="notes"
                type="textarea"
                :rows="4"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelMethod">取 消</el-button>
        <el-button type="primary" @click="defineMethod">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bus from '../../EventBus';
export default {
  data() {
    return {
      page:1,
      pageSize:5,
      tableData:[],
      allCount:0,
      nowTotalSize:0,
      // dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      image1: "", //上传图片
      formLabelWidth: "40px",
      checked: false, //自动生成编号
      imageUrl: "", //菜品图片
      dishNo: "", //菜品编号
      name: "", //菜品名称
      unitId: 0, //菜品单位id
      price: 0, //菜品单价
      originalPrice: 0, //菜品原价，
      bargainPrice: 0, //菜品特价
      bargainTime: "", //特价时间
      stock: 0, //库存数量
      stockOut: 0, //库存超出数量
      stockWarn: 0, //库存预警线
      categoryId: 0, //菜品类别id
      specificationId: 0, //菜品规格id
      tasteId: 0, //菜品口味id
      status: false, //状态 0 在售，1停售
      isOut: false, //是否外卖点餐 0 不点
      isShop: false, //是否门店点餐 0 否
      notes: "", //备注
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "", //菜品单位的id
      value1: "", //菜品类别的id
      value2: "", //菜品规格的id
      value3: "", //菜品口味的id
      categoryValue: "", //选择的菜品类别
    };
  },
  props: {
    changeStatus: {
      type: Boolean,
    },
    dishUnitTable: {
      //菜品单位下拉列表
      type: Array,
    },
    optionsCategory: {
      //菜品类别下拉列表
      type: Array,
    },
    SpecificationTable: {
      //菜品规格下拉列表
      type: Array,
    },
    dishTasteTable: {
      //菜品口味下拉列表
      type: Array,
    },
    rowIdData: {
      //根据id获取一行数据
      type: Object,
    },
    munuFileId: {
      //编辑行的id
      type: Number,
      default: 0,
    },
    flag: {
      type: Boolean,
    },
  },
  created() {
    //父级传过来更新后的分页页码
    bus.$on("sharePage",(val)=>{
      this.page=val.page,
      this.pageSize=val.pageSize
    })
     if(this.flag){
      this.bargainPrice=this.rowIdData.bargainPrice
      this.bargainTime=this.rowIdData.bargainTime,
      this.categoryId=this.rowIdData.categoryId,//菜品
      this.dishNo=this.rowIdData.dishNo,//菜品编号
      this.imageUrl=this.rowIdData.image,//菜品图片
      this.isOut=this.rowIdData.isOut==0? false: true,//是否点
      this.isShop=this.rowIdData.isShop==0? false : true,//是否
      this.name=this.rowIdData.name,//菜品名称
      this.notes=this.rowIdData.notes,//备注
      this.originalPrice=this.rowIdData.originalPrice,
      this.price=this.rowIdData.price,//价格
      this.specificationId=this.rowIdData.specificationId,//
      this.status=this.rowIdData.status==0? true : false,//状态 
      this.stock=this.rowIdData.stock,//库存
      this.stockOut=this.rowIdData.stockOut,//库存
      this.stockWarn=this.rowIdData.stockWarn,//库
      this.tasteId=this.rowIdData.tasteId,//菜品味道
      this.unitId=this.rowIdData.unitId//菜品单位id
      console.log('xxxxxxxxxxxx',this.dishTasteTable);
      this.dishUnitTable.forEach(item=>{ //菜品单位输入框渲染
        if(this.unitId=item.id){
          this.value=item.unit
        }
      });
      this.optionsCategory.forEach(item=>{//菜品类别输入框渲染
         if(this.categoryId=item.id){
           this.value1=item.category;
         }
      });
      this.SpecificationTable.forEach(item=>{//菜品规格输入框渲染
        if(this.specificationI=item.id){
          this.value2=item.specification;
        }
      });
      this.dishTasteTable.forEach(item=>{
        if(this.tasteId=item.id){
          this.value3=item.taste;
        }
      }) 
    }else{
      this.bargainPrice=""
      this.bargainTime=""
      this.categoryId=""
      this.dishNo=""
      this.imageUrl=""
      this.isOut=false
      this.isShop=false
      this.name=""
      this.notes=""
      this.originalPrice=""
      this.price=""
      this.specificationId=""
      this.status=false
      this.stock=""
      this.stockOut=""
      this.stockWarn=""
      this.unitId=""
    }
    // console.log(this.stockOut);
  },
  methods: {
    cancelMethod() {
      //点击取消，触发父组件修改changeStatus的值
      this.$emit("update:changeStatus", false);
    },
    async defineMethod() {
      console.log('flag的值',this.flag);
      if (this.flag == false) {
        //点击确定，触发父组件修改changeStatus的值
        this.$emit("update:changeStatus", false);
        const { data: res } = await this.axios.post("/dishFile/add", {
          bargainPrice: this.bargainPrice, //特价
          bargainTime: this.bargainTime, //特价时间
          categoryId: this.value1, //菜品分类id
          dishNo: this.dishNo, //菜品编号
          image: this.image1, //菜品图片
          isOut: this.isOut ? 1 : 0, //是否点外卖
          isShop: this.isShop ? 1 : 0, //是否门店点餐
          name: this.name, //菜品名称
          notes: this.notes, //备注
          originalPrice: this.originalPrice, //原价
          price: this.price, //价格
          specificationId: this.value2, //菜品规格id
          status: this.status ? 0 : 1, //状态 1 停售 0 在售
          stock: this.stock, //库存
          stockOut: this.stockOut, //库存超出预警线
          stockWarn: this.stockWarn, //库存预警线
          tasteId: this.value3, //菜品味道id
          unitId: this.value, //菜品单位id
        });
        console.log(res);
        if(res.code==200){
          console.log('添加成功',res);
          this.getMenuFileInfo(this.page,this.pageSize);
        }
        /*  console.log('菜品编号',this.dishNo);
      console.log('菜品名称',this.name);
      console.log('菜品单位的id',this.value);
      console.log('菜品单价',this.price);
      console.log('菜品类别的id',this.value1);
      console.log('菜品规格的id',this.value2);
      console.log('菜品口味的id',this.value3);
      console.log("状态",this.status);
      console.log("外卖点餐",this.isOut);
      console.log("门店点餐",this.isShop); */
      }else{
        console.log('触发了修改');
        this.$emit("update:changeStatus", false);
        const { data: res1 } = await this.axios.post("/dishFile/update", {
          bargainPrice: this.bargainPrice, //特价
          bargainTime: this.bargainTime, //特价时间
          categoryId: this.value1, //菜品分类id
          dishNo: this.dishNo, //菜品编号
          image: this.image1, //菜品图片
          id:this.munuFileId,//修改数据的id
          isOut: this.isOut ? 1 : 0, //是否点外卖
          isShop: this.isShop ? 1 : 0, //是否门店点餐
          name: this.name, //菜品名称
          notes: this.notes, //备注
          originalPrice: this.originalPrice, //原价
          price: this.price, //价格
          specificationId: this.value2, //菜品规格id
          status: this.status ? 0 : 1, //状态 1 停售 0 在售
          stock: this.stock, //库存
          stockOut: this.stockOut, //库存超出预警线
          stockWarn: this.stockWarn, //库存预警线
          tasteId: this.value3, //菜品味道id
          unitId: this.value, //菜品单位id
        });
        if(res1.code==200){   
           console.log('修改成功',res1);
          this.getMenuFileInfo(this.page,this.pageSize);
        }
      }
    },
    modalClose() {
      //点击右上角的x,触发父组件修改changeStatus的值
      this.$emit("update:changeStatus", false);
    },
    //菜品图片的相关函数
    handleAvatarSuccess(res, file) {
      console.log(file);
      console.log("xxxxxxxx", res);
      this.image1 = res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // console.log(file);
      // 将上传的文件对象改成formData对象
      // this.image = new FormData();
      // 添加一个表单属性
      // this.image.append('image', file);
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    /**
     * @description: 点击取消，取消添加特价函数
     * @param {*}
     * @return {*}
     */
    cancelAddSepcilPrice() {
      this.dialogFormVisible = false;
      this.$message({
        type: "info",
        message: "取消设置",
        duration: "500",
      });
    },
    /**
     * @description: 点击确定，确定添加特价函数
     * @param {*}
     * @return {*}
     */
    defineAddSpecilPrice() {
      this.dialogFormVisible = false;
      this.$message({
        type: "success",
        message: "设置成功",
        duration: "500",
      });
      /* console.log('特价',this.bargainPrice);
      console.log('特价时间',this.bargainTime); */
    },
    /**
     * @description: 点击取消，取消设置预警函数
     * @param {*}
     * @return {*}
     */
    cancelAddWarning() {
      this.dialogFormVisible1 = false;
      this.$message({
        type: "info",
        message: "取消设置",
        duration: "500",
      });
    },
    /**
     * @description: 点击确认，确实设置预警函数
     * @param {*}
     * @return {*}
     */
    defineAddWarning() {
      this.dialogFormVisible1 = false;
      this.$message({
        type: "success",
        message: "设置成功",
        duration: "500",
      });
      /* console.log('库存预警线',this.stockWarn);
      console.log('库存超出预警线',this.stockOut); */
    },
     /**
     * @description: 获取当前页的数据函数
     * @param {*} page 当前页码
     * @param {*} pageSize  显示数据条数
     * @return {*}
    */    
    async getMenuFileInfo(page,pageSize){
      const {data:res}=await this.axios.post("/dishFile/list",{
        page:page,
        pageSize:pageSize
      })
      if(res.code==200){
        // console.log(res);
        // console.log('x',res.data);
        this.tableData=res.data;//将表格数据存入tableData数组中，并通过父传子传给table子组件
        this.allCount=res.count;//接收总数据条数
        this.nowTotalSize=res.data.length;//当前点击页的数据条数
        bus.$emit('shareBusData',{
          tableData:this.tableData,
          allCount:this.allCount,
          nowTotalSize:this.nowTotalSize,
        })
          
      }      
    }
  },
};
</script>

<style>
#add-dialog .el-input {
  width: 70%;
}
#add-dialog .menu-number-input {
  width: 40%;
}
#add-dialog .menu-number-inputName {
  width: 53%;
}
#add-dialog .setting {
  padding: 0.8rem;
  margin-left: 1.5rem;
}
#add-dialog .el-input__inner {
  height: 3rem;
}
#add-dialog .el-form-item__label {
  font-size: 1rem;
}
#add-dialog .el-form-item {
  margin-bottom: 0;
}
#add-dialog .el-checkbox {
  margin-left: 1rem;
}
#add-dialog .el-input--suffix {
  width: 113%;
}
.specil-price-row {
  margin-bottom: 1rem;
  line-height: 4rem;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.dish-img {
  line-height: 8.2rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 8rem;
  height: 8rem;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 8rem;
  height: 8rem;
  line-height: 8rem;
  text-align: center;
}
.avatar {
  width: 8rem;
  height: 8rem;
  display: block;
}
</style>
